<template>
	<view class="box">
		<view class="top-banner">
			<image src="../../static/image/pic8.png" mode=""></image>
		</view>
		<view class="share-box flex fljcsb">
			<view class="flex1" @click="shareFriend">分享给好友</view>
			<view class="flex1" @click="nextPage">面对面邀请</view>
		</view>
		<!-- 邀请数据展示 -->
		<view class="shareData">
			<view class="shareWrap">
				<view class="shareRule">
					<image src="../../static/image/shareLeft.png" mode=""></image>
					<text style="color: #3CC200;">我的邀请战绩</text>
					<image src="../../static/image/shareRight.png" mode=""></image>
				</view>
				<view class="shareMiddlecenter">
					<text>已经累计邀请<text class="shareColortext">1000</text>人，红包奖励<text class="shareColortext">4000</text>元</text>
				</view>
				<view class="shareFlex">
					<view class="shareFlexfirst">
						<text>已注册：</text>
						<text>100</text>
					</view>

					<view class="shareFlexfirst">
						<text>已加入：</text>
						<text>100</text>
					</view>

					<view class="shareFlexfirst">
						<text>已浏览：</text>
						<text>100</text>
					</view>
				</view>
			</view>
		</view>
		<view class="activity-box">
			<view class="rule">
				<image src="../../static/image/pic11.png" mode=""></image>
				<text>活动规则</text>
				<image src="../../static/image/pic10.png" mode=""></image>
			</view>
			<view class="rule-con">
				{{title}}
			</view>
		</view>
		<view class="activity-footer">
			<image src="../../static/image/pic9.png" mode=""></image>
		</view>
		<view class="share-mask " v-if="isShowMask" @click="isShowMask=false">
			<view class="share-con flex flai">
				<view class="share-promit">
					点击这里 分享给更多小伙伴得奖励
				</view>
				<image src="../../static/image/share.png" mode="" class="share-icon"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import api from '../../api/index.js'
	import {
		jsapiSign,
		shareUrl
	} from '../../static/common.js'
	export default {
		data() {
			return {
				isShowMask: false,
				title: '',
				info: {},

			}
		},
		onLoad() {
			//this.shareFriends()
			shareUrl('测试一下', '描述', '/pages/redPackage/redPackage',
				'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1585743298&di=cd0e6085ae2fa0456f969d766a57085b&src=http://a4.att.hudong.com/21/09/01200000026352136359091694357.jpg'
			)
		},
		onShow() {
			this.getJSConfig()
			this.getRule()
			this.getInfo()

		},
		methods: {
			// 分享到朋友圈
			shareFriends() {
				//分享到微信朋友
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http:*******************", //这地址太长了，就省略了
					title: "你笑起来真好看",
					summary: "唐艺昕，你有火吗？没有,为何你点燃了我的心？",
					imageUrl: "http://mdhz.oss-cn-beijing.aliyuncs.com/pic1.png",
					success: function(res) {

					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败'
						})
					}
				});
			},

			//分享到微信朋友圈
			shareFriendcricle: function() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: "http:*******************",
					title: "你笑起来真好看",
					summary: "唐艺昕，没有水的地方叫沙漠，没有你的地方，你知道叫什么吗？不知道。叫寂寞。",
					imageUrl: "http:*******************",
					success: function(res) {},
					fail: function(err) {}
				});

			},
			// 获取签名信息
			getJSConfig() {
				api.wxAuth.getJSConfig({
					url: '/pages/redPackage/redPackage'
				}).then(res => {
					if (res.code == 1) {
						jsapiSign(res.data)
						shareUrl('分享测试', '分享描述', '/pages/joinPage/joinPage?inviteCode=' + this.info.inviteCode,
							'http://mdhz.oss-cn-beijing.aliyuncs.com/pic1.png')
					}
				})
			},
			// 分享遮罩显示
			shareFriend() {
				this.isShowMask = true
			},
			// 获取标题
			getRule() {
				api.cms.lookArticleDetail({
					id: '1242625814060085249'
				}).then(res => {
					if (res.code == 1) {
						this.title = res.data.title
					}
				})
			},
			// 获取用户信息
			getInfo() {
				api.wxAuth.invite().then(res => {
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
			// 去面对面页面
			nextPage() {
				uni.navigateTo({
					url: '/pages/redPackage/faceToFace'
				})
			}
		}
	}
</script>

<style>
	@import "../../static/css/common.css";

	.shareData {
		width: 670rpx;
		height: 312rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 50rpx;
		margin: 60rpx auto 0;
		position: relative;
	}

	.shareWrap {
		width: 670rpx;
		height: 312rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 50rpx;
		position: absolute;
		left: 0;
		top: 18rpx;
	}

	.box {
		height: 100%;
		background: #65C47E;
		width: 100%;
	}

	.top-banner {
		width: 100%;
		text-align: center;
		height: 454rpx;
	}

	.top-banner image {
		width: 100%;
		height: 100%;
	}

	.share-box {
		width: 700rpx;
		margin-left: 25rpx;
		margin-top: 40rpx;
	}

	.share-box view {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		height: 101rpx;
		line-height: 101rpx;
		text-align: center;
		border-radius: 49rpx;
		box-shadow: 0px 3rpx 12rpx 0px rgba(57, 167, 104, 1);
	}

	.share-box view:nth-child(2) {
		margin-left: 40rpx;
		background: linear-gradient(-30deg, rgba(255, 184, 31, 1), rgba(231, 157, 0, 1));
	}

	.share-box view:nth-child(1) {
		background: linear-gradient(-30deg, rgba(242, 165, 0, 1), rgba(255, 212, 120, 1));
	}

	.share-box view:active {
		opacity: 0.6;
	}

	.shareRule {
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 191, 0, 1);
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shareRule text {
		margin: 0 29rpx;
	}

	.shareRule image {
		width: 30rpx;
		height: 30rpx;
	}

	.shareMiddlecenter {
		width: 630rpx;
		height: 80rpx;
		background: rgba(243, 165, 0, 0.1);
		border-radius: 40rpx;
		margin: 31rpx auto 60rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.shareMiddlecenter text {
		width: 523rpx;
		height: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(17, 17, 17, 1);
		letter-spacing: 3rpx;
	}

	.shareMiddlecenter .shareColortext {
		color: #F3A500;
	}

	.shareFlex {
		width: 600rpx;
		margin: auto;
		display: flex;
		justify-content: space-around;
	}

	.shareFlexfirst {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.shareFlexfirst text:last-child {
		color: rgba(243, 165, 0, 1);
	}

	.rule {
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 36px;
		margin-top: 40rpx;
	}

	.rule-con {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 36rpx;
		width: 700rpx;
		margin-left: 25rpx;
		margin-top: 30rpx;
	}

	.activity-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		z-index: 20;
	}

	.activity-footer image {
		width: 100%;
		height: 100%;
	}

	.rule image {
		width: 30rpx;
		height: 30rpx;

	}

	.rule text {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.share-mask {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 200;

	}

	.share-promit {
		width: 460rpx;
		height: 90rpx;
		background: rgba(102, 191, 0, 1);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		line-height: 90rpx;
		text-align: center;
	}

	.share-icon {
		width: 91rpx;
		height: 149rpx;
	}

	.share-con {
		position: absolute;
		width: 100%;
		left: 20%;
	}

	.share-promit {
		margin-top: 130rpx;
	}
</style>
